<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
  total: { type: Number, default: 1 },
  modelValue: { type: Number, default: 1 }
})
const emit = defineEmits(['update:modelValue'])

const pages = computed(() => {
  return Array.from({ length: props.total }, (_, i) => i + 1)
})

function setPage(page: number) {
  if (page < 1 || page > props.total) return
  emit('update:modelValue', page)
}
</script>

<template>
  <div v-if="total > 1" class="pagination">
    <span class="pagination-info">共{{ total }}页</span>
    <button class="pagination-btn" :disabled="modelValue === 1" @click="setPage(modelValue - 1)">上一页</button>
    <button
      v-for="page in pages"
      :key="page"
      class="pagination-btn"
      :class="{ active: modelValue === page }"
      @click="setPage(page)"
    >{{ page }}</button>
    <button class="pagination-btn" :disabled="modelValue === total" @click="setPage(modelValue + 1)">下一页</button>
  </div>
</template>

<style scoped lang="less">
.pagination {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 8px;
  margin-top: 60px;
  margin-bottom: 40px;
  .pagination-info {
    color: #444;
    font-size: 15px;
    margin-right: 12px;
  }
  .pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: none;
    background: #f5f5f5;
    color: #2d3a4a;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    outline: none;

    &.active {
      background: var(--primary-color);
      color: #fff;
      font-weight: bold;
    }
    &:disabled {
      color: #aaa;
      background: #f5f5f5;
      cursor: not-allowed;
    }
  }
}
</style>